<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"><title>城市通勤出行分析</title><!--引入echarts.js-->
    <!--<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>-->
    <#--<#include "../../include/head-file.ftl">-->
    <script type="text/javascript" src="${base}/static/plugins/jquery/3.2.1/jquery-3.2.1.min.js"></script>
    <script src="${base}/static/plugins/echarts.4.2.1/echarts.min.js"></script>
    <script src="${base}/static/report/map-echarts/hainan.json"></script>
</head>
<body>
<div id="content" style="background: white;">
    <div style="font-weight:bold;font-size:20px;margin-top: 20px;">一、通勤概况分析</div>
    <div style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;">本周各市的通勤概况如下：</div>
    <div id="table1-desc" style="text-indent: 2em;font-size:20px;line-height: 35px;">
    </div>
    <div id="table2-desc" style="text-indent: 2em;font-size:20px;line-height: 35px;"></div>
    <#--<table  id='table1' style="margin-top:15px;">
        <tr>
            <th>区县</th>
            <th>平均通勤距离</th>
        </tr>
    </table>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">表1 {{data}}市各区县平均通勤距离</div>-->
    <div style="width: 1000px;margin: 16px auto;overflow: hidden;position: relative;">
        <select id="areaId_1" style="padding: 5px;min-width: 100px; position: absolute; right: 0;z-index: 1;" onchange="change(1)"></select>
        <div id="myecharts1" style="width: 100%; height: 400px;"></div>
    </div>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">图1 {{data}}市各区县平均通勤距离</div>

    <#--<table  id='table2' style="margin-top:15px;">
        <tr>
            <th>区县</th>
            <th>平均通勤耗时</th>
        </tr>
    </table>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">表2 {{data}}市各区县平均通勤耗时</div>-->
    <div style="width: 1000px;margin: 16px auto;overflow: hidden;position: relative;">
        <select id="areaId_2" style="padding: 5px;min-width: 100px; position: absolute; right: 0;z-index: 1;" onchange="change(2)"></select>
        <div id="myecharts2" style="width: 100%; height: 400px;"></div>
    </div>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">图2 {{data}}市各区县平均通勤耗时</div>

    <div id="table3-desc" style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;"></div>
    <table  id='table3' style="margin-top:15px;">
        <#--<tr >-->
        <#--<th>&nbsp;</th>-->
        <#--<th>秀英区</th>-->
        <#--<th>龙华区</th>-->
        <#--<th>琼山区</th>-->
        <#--<th>美兰区</th>-->
        <#--</tr>-->
    </table>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">表3 {{data}}市通勤距离在不同区域的变化特征</div>

    <div style="font-weight:bold;font-size:20px;margin-top: 20px;">二、通勤时间分布特征</div>
    <div id="table4-desc" style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;"></div>
    <#--<table  id='table4' style="margin-top:15px;">
        <tr>
            <th>时间</th>
            <th>出行人数</th>
        </tr>
    </table>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">表4 通勤出行时间分布</div>-->
    <div id="myecharts4" style="width: 1000px; height: 400px; margin: 0 auto; margin-top: 20px"></div>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">图4 通勤出行时间分布</div>

    <div id="table5-desc" style="text-indent: 2em;font-size:20px;margin-top: 15px;line-height: 35px;"></div>
    <table  id='table5' style="margin-top:15px;">
        <#--<tr>-->
        <#--<th>&nbsp;</th>-->
        <#--<th>秀英区</th>-->
        <#--<th>龙华区</th>-->
        <#--<th>琼山区</th>-->
        <#--<th>美兰区</th>-->
        <#--</tr>-->
    </table>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">表5 {{data}}市通勤时间在不同区域的变化特征</div>

    <div style="font-weight:bold;font-size:20px;margin-top: 20px;">三、通勤人口职住地分布</div>
    <div id="table6-desc" style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;">
    </div>
    <#--<table  id='table6' style="margin-top:20px;">
        <tr>
            <th>区县</th>
            <th>人数</th>
        </tr>
    </table>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">表6 通勤人口居住地分布情况</div>-->
    <div id="map6" style="width: 1000px; height: 500px; margin: 0 auto; margin-top: 20px"></div>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">图4 通勤人口居住地分布情况</div>

    <#--<table  id='table7' style="margin-top:15px;">
        <tr>
            <th>区县</th>
            <th>人数</th>
        </tr>
    </table>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">表7 通勤人口工作地分布情况</div>-->
    <div id="map7" style="width: 1000px; height: 500px; margin: 0 auto; margin-top: 20px"></div>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">图5 通勤人口工作地分布情况</div>

    <div style="font-weight:bold;font-size:20px;margin-top: 20px;">四、通勤出行方式分析</div>
    <div id="table8-desc" style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;">
    </div>
    <table  id='table8' style="margin-top:15px;">
        <tr>
            <th width="50%">出行方式</th>
            <th width="50%">人数</th>
        </tr>
    </table>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">表8  {{data}}市通勤出行方式概况</div>

</div>
<script>
    <#--var dataTable1 = ${dataTable1}-->
    <#--var dataTable2 = ${dataTable2}-->
    $("#table1-desc").html('{{data}}市通勤出行量日均{{data}}万，<span style="color: rgb(46,117,182)">占出行总量的{{data}}%</span>，平均通勤距离Xkm，平均通勤耗时{{data}}min。');
    $("#table2-desc").text("以通勤距离度量{{data}}职住分离度，从{{data}}去到{{data}}区，职住分离度逐渐增大，{{data}}区的平均通勤距离高达{{data}}km（表1），{{data}}区的平均通勤耗时高达{{data}}min（表2）。")
    var dataTable3 = ${dataTable3}
    <#--var dataTable4 = ${dataTable4}-->
    $("#table4-desc").text("由于工作时间的固定性，如表4，从通勤出行出发时间角度看，早{{data}}:00-{{data}}:00出行量持续升高，晚{{data}}:00-{{data}}:00出行量持续升高。早高峰时段，{{data}}:00通勤出行达到最高峰{{data}}万人次，晚高峰时段{{data}}:00达到最高峰{{data}}万人次。由此可见，{{data}}高峰通勤出行更为集中。")
    var dataTable5 = ${dataTable5}
    <#--var dataTable6 = ${dataTable6}-->
    <#--var dataTable7 = ${dataTable7}-->
    var dataTable6First = ${dataTable6First}
    var dataTable6FirstWork = ${dataTable6FirstWork}
    var dataTable6Second = ${dataTable6Second}
    var dataTable6SecondWork = ${dataTable6SecondWork}
    $("#table6-desc").text('据统计结果发现，居住在' + dataTable6First.county + '区域的人数最多，高达' + dataTable6First.count + '人，该区域对应的工作人口数量为' + dataTable6FirstWork +'人；其次是' + dataTable6Second.county + '区域，居住人数为' + dataTable6Second.count + '人，工作人数为' + dataTable6SecondWork + '人。')
    var dataTable8 = ${dataTable8}
    $("#table8-desc").text("据统计结果发现，使用" + dataTable8[0].travelMode + "的通勤方式占多数，一共" + dataTable8[0].count + "人，占出行人数的${dataTable8FirstRate}%，使用" + dataTable8[dataTable8.length-1].travelMode + "的通勤方式人数最少，一共" + dataTable8[dataTable8.length-1].count + "人，占出行人数的${dataTable8SecondRate}%。")
    $("#table3-desc").text("由表3通勤距离在不同区域的变化特征可以发现，${dataTable3LessThan3km}区内通勤距离在3km以内的人数最多，${dataTable3MoreThan60km}区内通勤距离在50km以上的人数最多。")
    $("#table5-desc").text("由表5通勤时间分布特征可以发现，通勤时间在15min以内的人数${lessThan3kmMax}区人数最多，${lessThan3kmMin}区人数最少。通勤距离在60min以上的人数${moreThan60KmMax}区内人数最多${moreThan60KmMin}区内人数最少")
    var result1 = {
        "三沙市": [
            { area: "海口", count: 1006 },
            { area: "白沙", count: 565 },
            { area: "陵水", count: 4954 },
            { area: "三亚", count: 221 },
            { area: "琼海", count: 41 },
            { area: "文昌", count: 400 },
            { area: "万宁", count: 144 },
            { area: "东方", count: 94 },
            { area: "儋州", count: 664 },
        ],
        "文昌市": [
            { area: "海口", count: 1006 },
            { area: "白沙", count: 565 },
            { area: "陵水", count: 4954 },
            { area: "东方", count: 94 },
            { area: "儋州", count: 664 },
        ]
    };

    var result2 = {
        "海口市": [
            { area: "琼山区", count: 1006 },
            { area: "美兰区", count: 565 },
            { area: "龙华区", count: 4954 },
            { area: "秀英区", count: 221 },
        ],
        "三亚市": [
            { area: "琼山区", count: 16 },
            { area: "美兰区", count: 565 },
            { area: "龙华区", count: 454 },
            { area: "秀英区", count: 22 },
        ],
    };
    var result4 = [
        {
            date: "2022-06-07",
            datas: [
                { time: "08:00", count: 6 },
                { time: "09:00", count: 144},
                { time: "10:00", count: 4 },
                { time: "11:00", count: 1444 },
            ],
        },
        {
            date: "2022-06-08",
            datas: [
                { time: "08:00", count: 6 },
                { time: "09:00", count: 45 },
                { time: "10:00", count: 44 },
                { time: "11:00", count: 244 },
            ]
        },
        {
            date: "2022-06-09",
            datas: [
                { time: "08:00", count: 6 },
                { time: "09:00", count: 245 },
                { time: "10:00", count: 44 },
                { time: "11:00", count: 244 },
            ]
        },
        {
            date: "2022-06-10",
            datas: [
                { time: "08:00", count: 6 },
                { time: "09:00", count: 245 },
                { time: "10:00", count: 844 },
                { time: "11:00", count: 244 },
            ]
        },
    ];
    var result6 = [
        { pubArea: "海口", pubCount: 6 },
        { pubArea: "白沙", pubCount: 565 },
        { pubArea: "陵水", pubCount: 44 },
    ];
    var result7 = [
        { pubArea: "海口", pubCount: 6 },
        { pubArea: "三亚", pubCount: 99 },
        { pubArea: "文昌", pubCount: 44 },
    ];
    $(document).ready(function(){
        // $("#test1").text("Hello world!");
        // $.each(dataTable1,function(index,item){
        //     var tr='<td>'+item.county+'</td>'+'<td>'+item.distance+'</td>';
        //     $("#table1").append('<tr>'+tr+'</tr>')
        // });
        //
        // $.each(dataTable2,function(index,item){
        //     var tr='<td>'+item.county+'</td>'+'<td>'+item.time+'</td>';
        //     $("#table2").append('<tr>'+tr+'</tr>')
        // });
        var resultKey1 = [], resultData1 = []
        var resultKey2 = [], resultData2 = []
        $.each(result1,function(key, item) {
            resultKey1.push(key)
            var option="<option value="+key+">"+key+"</option>";
            $("#areaId_1").append(option)
        });
        $.each(result2,function(key, item) {
            resultKey2.push(key)
            var option="<option value="+key+">"+key+"</option>";
            $("#areaId_2").append(option)
        });
        // 取第一个的值
        resultData1 = resultKey1.length>0? result1[resultKey1[0]]: []
        resultData2 = resultKey2.length>0? result2[resultKey2[0]]: []

        initEcharts1(resultData1)
        initEcharts2(resultData2)

        if(dataTable3){
            var th='<th>&nbsp;</th>';
            $.each(dataTable3.head,function(index,item){
                th += '<th>'+item.name+'</th>';
            });
            $("#table3").append('<tr>'+th+'</tr>');
            $.each(dataTable3.data,function(index,item){
                var tr='<td>'+item.peopleCount+'</td>';
                $.each(dataTable3.head,function(index1,item1){
                    tr += '<td>'+item[item1.field]+'</td>';
                });
                $("#table3").append('<tr>'+tr+'</tr>')
            });
        }

        // $.each(dataTable4,function(index,item){
        //     var tr='<td>'+item.time+'</td>'+'<td>'+item.peopleCount+'</td>';
        //     $("#table4").append('<tr>'+tr+'</tr>')
        // });
        var myecharts4 = echarts.init(document.getElementById("myecharts4"));
        // var barLegendData = $.map(result4, function(n, i){ return n.time })
        // var barValues = $.map(result4, function(n, i){ return n.count })
        // var optionLine = getOptionLine(barLegendData, barValues, '人员出行时间分布特征')
        var series = [], xCategory = [], color = ['#4b91ff', '#f2637b', '#f49b25', '#5ace7d', '#8f53e0', '#f9cd1a']
        $.each(result4,function(index,item) {
            var obj = { name: '', type: 'line', data: [] }
            var count = $.map(item.datas, function(n, i){ return n.count; })
            if(index===0) {
                xCategory = $.map(item.datas, function(n, i){ return n.time; })
            }
            obj.name = item.date;
            obj.data = count;
            series.push(obj);
        });
        var optionLine = getOptionLine(xCategory, series, '人员出行时间分布特征', color)
        myecharts4.setOption(optionLine);

        if(dataTable5){
            var th='<th>&nbsp;</th>';
            $.each(dataTable5.head,function(index,item){
                th += '<th>'+item.name+'</th>';
            });
            $("#table5").append('<tr>'+th+'</tr>');
            $.each(dataTable5.data,function(index,item){
                var tr='<td>'+item.peopleCount+'</td>';
                $.each(dataTable5.head,function(index1,item1){
                    tr += '<td>'+item[item1.field]+'</td>';
                });
                $("#table5").append('<tr>'+tr+'</tr>')
            });
        }

        // $.each(dataTable6,function(index,item){
        //     var tr='<td>'+item.county+'</td>'+'<td>'+item.count+'</td>';
        //     $("#table6").append('<tr>'+tr+'</tr>')
        // });
        // $.each(dataTable7,function(index,item){
        //     var tr='<td>'+item.county+'</td>'+'<td>'+item.count+'</td>';
        //     $("#table7").append('<tr>'+tr+'</tr>')
        // });
        var outdata6 = $.map(result6, function(n, i){
            return {
                name: n.pubArea,
                value: n.pubCount
            }
        })
        var option6 = getOptionMap(outdata6)
        var echartsMap6 = echarts.init(document.getElementById("map6"));
        echarts.registerMap("hainan", hainan);
        echartsMap6.setOption(option6);

        var outdata7 = $.map(result7, function(n, i){
            return {
                name: n.pubArea,
                value: n.pubCount
            }
        })
        var option7 = getOptionMap(outdata7)
        var echartsMap7 = echarts.init(document.getElementById("map7"));
        echarts.registerMap("hainan", hainan);
        echartsMap7.setOption(option7);

        $.each(dataTable8,function(index,item){
            var tr='<td>'+item.travelMode+'</td>'+'<td>'+item.count+'</td>';
            $("#table8").append('<tr>'+tr+'</tr>')
        });
    });

    function getOptionBar(barXAxisData, countValues, title, color) {
        var option = {
            title: {
                text: title,
            },
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "shadow",
                },
            },
            color: color?color: ['#4b91ff'],
            legend: false,
            grid: {
                left: "3%",
                right: "4%",
                bottom: "3%",
                containLabel: true,
            },
            xAxis: {
                type: "category",
                data: barXAxisData,
            },
            yAxis: {
                type: "value",
                boundaryGap: [0, 0.01],
                axisLabel: {
                    fontSize: 14,
                    show: true,
                    formatter: function(params) {
                        var result = ''
                        result = params / 10000
                        if (params > 1000) {
                            return result + '万'
                        } else {
                            return params
                        }
                    },
                },
            },
            series: [
                {
                    type: "bar",
                    data: countValues
                }
            ]
        }
        return option
    }
    function getOptionLine(barLegendData, series, title, color) {
        var option = {
            title: {
                text: title,
            },
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "line",
                },
            },
            color: color? color: ['#4b91ff'],
            legend: false,
            grid: {
                left: "3%",
                right: "4%",
                bottom: "3%",
                containLabel: true,
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: barLegendData,
            },
            yAxis: {
                name: '单位/万',
                type: 'value',
                boundaryGap: [0, 0.01],
                axisLabel: {
                    fontSize: 14,
                    show: true,
                    formatter: function(params) {
                        var result = ''
                        result = params / 10000
                        if (params > 1000) {
                            return result + '万'
                        } else {
                            return params
                        }
                    },
                },
            },
            series: series
        }
        return option
    }
    function getOptionMap(outdata) {
        var option = {
            tooltip: {
                show: true,
                formatter: function (params) {
                    if (params.value) {
                        return (
                            "&nbsp;&nbsp;" +
                            params.name +
                            "&nbsp;&nbsp;&nbsp;" +
                            params.value +
                            "&nbsp;&nbsp;"
                        );
                    } else {
                        return (
                            "&nbsp;&nbsp;" +
                            params.name +
                            "&nbsp;&nbsp;&nbsp;0&nbsp;&nbsp;"
                        );
                    }
                },
            },
            visualMap: {
                type: 'piecewise',
                min: 0,
                max: 1000,
                left: 20,
                bottom: 0,
                showLabel: !0,
                padding: [15, 10],
                backgroundColor: "transparent", //标题背景色
                borderColor: "#01698C", //边框颜色
                color: "#01698C",
                textStyle: {
                    color: "#000"
                },
                borderWidth: 1,
                pieces: [
                    {
                        gt: 20,
                        label: "20以上",
                        color: "#FF1B00"
                    },
                    {
                        gte: 10,
                        lte: 20,
                        label: "10 - 20",
                        color: "#DE6B00"
                    },
                    {
                        gte: 1,
                        lt: 10,
                        label: "1 - 10",
                        color: "#F1CE2A"
                    },
                    {
                        value: 0,
                        color: "rgba(1,63,77, 0.3)"
                    }
                ],
                show: !0
            },
            geo: {
                map: "hainan",
                roam: !1,
                scaleLimit: {
                    min: 1,
                    max: 2
                },
                zoom: 1.2,
                label: {
                    show: true,
                    color: "#fff",
                    fontSize: 12
                },
                itemStyle: {
                    normal: {
                        borderColor: "#22A3BE",
                        areaColor: "rgba(1,89,98, 0.2)",
                        borderWidth: 1,
                        shadowBlur: 0.01,
                        shadowColor: "rgba(63, 218, 255, 1)"
                    },
                    emphasis: {
                        areaColor: "rgba(243, 131, 75, 0.8)",
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        borderWidth: 0,
                        shadowBlur: 20,
                        shadowColor: "rgba(0, 0, 0, 0.5)",
                    }
                },
            },
            series: [
                {
                    type: "map",
                    map: "hainan",
                    aspectScale: 0.75,
                    zoom: 1.2,
                    label: {
                        normal: {
                            formatter: function (para) {
                                return "{name|" + para.name + "}";
                            },
                            rich: {
                                cnNum: {
                                    fontSize: 11,
                                    color: "#333333",
                                    align: "center",
                                },
                                name: {
                                    fontSize: 10,
                                    color: "#333333",
                                    align: "center",
                                    lineHeight: 20,
                                },
                            },
                            //formatter: '{b}',
                            color: "#333333",
                            show: true,
                        },
                        emphasis: {
                            show: false,
                        },
                    },
                    itemStyle: {
                        normal: {
                            areaColor: "#D9EEFF",
                            borderColor: "#fff",
                            borderWidth: 1,
                        },
                        emphasis: {
                            areaColor: "#FFAE00",
                        },
                    },
                    data: outdata,
                    nameMap: {
                        海口市: "海口",
                        三亚市: "三亚",
                        儋州市: "儋州",
                        五指山市: "五指山",
                        琼海市: "琼海",
                        文昌市: "文昌",
                        万宁市: "万宁",
                        东方市: "东方",
                        定安县: "定安",
                        屯昌县: "屯昌",
                        澄迈县: "澄迈",
                        临高县: "临高",
                        白沙黎族自治县: "白沙",
                        昌江黎族自治县: "昌江",
                        乐东黎族自治县: "乐东",
                        陵水黎族自治县: "陵水",
                        保亭黎族苗族自治县: "保亭",
                        琼中黎族苗族自治县: "琼中",
                        南海诸岛: "南海诸岛",
                    },
                },
            ],
        }
        return option
    }
    function initEcharts1(datas) {
        var myecharts = echarts.init(document.getElementById("myecharts1"));
        var barXAxisData = $.map(datas, function(n, i){ return n.area  });
        var countValues = $.map(datas, function(n, i){ return n.count });
        var optionBar = getOptionBar(barXAxisData, countValues, '各区平均通勤距离');
        myecharts.setOption(optionBar);
    }
    function initEcharts2(datas) {
        var myecharts = echarts.init(document.getElementById("myecharts2"));
        var barXAxisData = $.map(datas, function(n, i){ return n.area  });
        var countValues = $.map(datas, function(n, i){ return n.count });
        var optionBar = getOptionBar(barXAxisData, countValues, '各区平均通勤耗时');
        myecharts.setOption(optionBar);
    }
    function change(type) {
        var areaId = document.getElementById('areaId'+'_'+type);
        var d1 = areaId.options[areaId.selectedIndex].value;
        var d2 = areaId.value;
        if(type===1) initEcharts1(result1[d2])
        if(type===2) initEcharts2(result2[d2])
    }
</script>
<style>
    table th, table td { border-bottom: 0.5px solid #999;border-right: 0.5px solid #999; }
    table { border-top: 0.5px solid #999; border-left: 0.5px solid #999;width: 800px; line-height: 40px; text-align: center; border-collapse: collapse; padding:2px;margin: 0 auto;font-size: 20px;}
</style>
</body>
</html>